<template>
	<view class="com_mask_bg" :class="{ on: on }">
		<view class="com_mask_content" :class="ani_position" :style="{ height: `${change_var.win_height}rpx` }">
			<view class="com_mask" :style="{ height: `${change_var.win_height}rpx` }" @touchmove.stop.prevent="moveHandle" @click.stop="mask_click()"></view>
			<view class="ani_view" :class="ani_type" :style="[ani_view_style]">
				<!-- 优惠券弹框下到上 -->
				<view class="com_mask_view">
					<view class="com_mask_title">
						<text class="title">{{ show_title }}</text>
					</view>

					<view class="com_mask_show">
						<text class="c_tt">
							{{ show_content }}
						</text>
					</view>

					<view class="btns_view">
						<btns :title="confirm_tt" btn_class="" height="110" :padding="[10, 0]" radius="40" @module_btn_click="popup_btn_click(1)" v-if="objJudge(confirm_tt)"></btns>

						<btns
							:title="cancel_tt"
							btn_class=""
							height="110"
							:padding="[10, 0]"
							radius="40"
							:btn_config="{ backgroundColor: '#f4f5f7' }"
							:txt_config="{ color: '#000000' }"
							@module_btn_click="popup_btn_click(-1)"
							v-if="objJudge(cancel_tt)"
						></btns>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { common } from '@/util/method.js';

import storeMixin from '@/store/storeMixin';
export default {
	mixins: [storeMixin],
	name: 'myAuthorityPopup',
	props: {
		show_width: {
			type: [Number, String],
			default: '750',
		},
		on: {
			type: [Boolean],
			default: false,
		},

		// bot_top 底部向上
		ani_type: {
			type: [String],
			default: 'bot_top',
		},

		ani_position: {
			type: [String],
			default: 'bot',
		},
		//  -1 自定义
		//  1 左侧标题 底部按钮
		//  2 modal 模态确认框
		popup_type: {
			type: [Number, String],
			default: -1,
		},
		con_title: {
			type: [String],
			default: '',
		},

		// confirm: {
		// 	type: [String, Boolean],
		// 	default: '去设置',
		// },

		// cancel: {
		// 	type: [String, Boolean],
		// 	default: '取消',
		// },

		popup_config: {
			type: [Object],
			default: function () {
				return {};
			},
		},
	},
	data() {
		return {
			change_var: {},
			active_btn: '',

			system_key: '',
			system_key_list: [],
			show_title: '',
			show_content: '',
			confirm_tt: '',
			cancel_tt: '',
		};
	},
	created() {
		this.init_pagedata('myAuthorityPopup');
		// console.log(this.popup_config, 'popup_config')
	},
	watch: {
		on: {
			handler(newVal) {
				// console.log(newVal, 'skuid')
				this.init_components();
			},
			// immediate: true,
			// deep: true,
		},
	},
	computed: {
		ani_view_style() {
			let padding = `20rpx`;
			if (this.COMMON_VAR.safeAreaInsets_bot > 0) {
				let _bot = this.COMMON_VAR.safeAreaInsets_bot;
				padding = `20rpx 20rpx ${_bot}rpx`;
			}
			return {
				padding,
			};
		},
	},
	methods: {
		...common,
		init_components() {
			let _this = this;
			let permission_config = this.COMMON_VAR.permission_config || {};
			console.log(permission_config);
			let _system = this.COMMON_VAR.platform;
			let _key = this.popup_config.system_key || '';

			if (_this.objJudge(permission_config) && _this.objJudge(_system) && _this.objJudge(_key)) {
				let reject_count = uni.getStorageSync(`${_key}_reject`) || 0;
				// 系统权限未开启，点击【去设置】完成设置 次数大于1
				this.system_key = permission_config[_key][_system]['system_key'];
				this.system_key_list = permission_config[_key][_system]['system_key_list'] || [];

				this.show_title = permission_config[_key]['tips_tt'];
				this.show_content = permission_config[_key][_system]['check_tips'];

				this.confirm_tt = '去设置';
				this.cancel_tt = '取消';

				if (reject_count > 0) {
					this.show_content = '系统权限未开启，点击【去开启】完成开启';
					let reject_tips = permission_config[_key][_system]['reject_tips'];
					if (_this.objJudge(reject_tips)) {
						this.show_content = reject_tips;
					}
					this.confirm_tt = '去开启';
					this.cancel_tt = '拒绝';
				}
			}
			// console.log(permission_config, _key, this.show_title, this.show_content);
		},

		view_down(v) {
			// console.log("view_down");
			this.active_btn = v;
		},
		view_up() {
			// console.log("view_up");
			this.active_btn = '';
		},

		moveHandle() {
			// 禁止原生滚动
		},
		popup_btn_click(type) {
			let _this = this;
			let system_key = _this.system_key;
			if (_this.objJudge(_this.system_key_list)) {
				system_key = _this.system_key_list;
			}
			this.$emit('popup_btn_click', {
				type,
				system_key,
				key: this.popup_config.system_key,
			});
		},
		mask_click() {
			// this.$emit('mask_click', { popup_type: this.popup_type });
		},
	},
};
</script>

<style lang="scss">
.com_mask_bg {
	// width: 100%;
	// height: 100vh;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 990;
	visibility: hidden;

	&.on {
		visibility: visible;

		.com_mask {
			opacity: 1;
			visibility: visible;
		}

		.ani_view {
			&.bot_top {
				transform: translateY(0%);
			}

			&.scale {
				transition: all 0s;
				opacity: 1;
				// transform: scale(1);
			}
		}
	}

	.com_mask_content {
		width: 750rpx;
		height: 100vh;
		position: relative;
		z-index: 2;
		display: flex;
		flex-direction: column;
		align-items: center;

		&.bot {
			justify-content: flex-end;
		}

		&.top {
			justify-content: flex-start;
		}

		&.center {
			justify-content: center;
		}
	}

	.com_mask {
		// width: 100%;
		// height: 100%;
		background-color: rgba(0, 0, 0, 0.55);
		position: absolute;
		left: 0;
		right: 0;
		z-index: 1;
		opacity: 0;
		visibility: hidden;
		transition: all 0.3s;
		-webkit-transition: all 0.3s;
		-moz-transition: all 0.3s;
		-ms-transition: all 0.3s;
		-o-transition: all 0.3s;
	}

	.ani_view {
		position: relative;
		z-index: 2;
		// padding: 30rpx;
		width: 750rpx;
		transition: all 0.3s;
		-webkit-transition: all 0.3s;
		-moz-transition: all 0.3s;
		-ms-transition: all 0.3s;
		-o-transition: all 0.3s;

		&.bot_top {
			transform: translateY(100%);
		}

		&.scale {
			opacity: 0;
			transform: scale(1);
		}
	}
}

.com_mask_view {
	background-color: #ffffff;
	border-radius: 40rpx;
	overflow: hidden;
	padding: 50rpx 50rpx 40rpx;
	.com_mask_title {
		position: relative;
		padding: 0 30rpx;
		// height: 90rpx;

		display: flex;
		align-items: center;
		justify-content: center;

		.com_close {
			height: 90rpx;
		}

		.title {
			font-size: 34rpx;
			font-weight: bold;
			color: #333333;
		}
	}

	.com_mask_show {
		padding: 30rpx 0 50rpx;

		.c_tt {
			font-size: 32rpx;
		}
	}

	// .com_mask_btn {
	// 	padding: 12rpx 36rpx;

	// }
}
</style>
